<template>
	<view>
		<view class="logo">
			<image src="../../static/login/logo.png"></image>
		</view>
		<view class="image">
			<text>注册</text>
		</view>
		<!-- 用户注册 -->
		<view class="userRegister">
			<!-- 用户名 -->
			<view class="username">
				<input type="text" v-model="username" value="" placeholder="请输入用户名" />
			</view>
			<!-- 密码 -->
			<view class="userpass">
				<input type="text" v-model="password" value="" placeholder="请输入密码" />
			</view>
			<!-- 确认密码 -->
			<view class="ConfirmPassword">
				<input type="text" v-model="verifyPassword" value="" placeholder="请再次输入密码" />
			</view>
			<!-- 验证码 -->
			<view class="CAPTCHA">
				<view class="">
					<input type="text" v-model="CAPTCHA" value="" placeholder="请输入验证码" />
				</view>
				<view class="">
					<image src="../../static/login/zym.png" mode=""></image>
				</view>
			</view>
			<!-- 手机发送验证码 -->
			<view class="phone">
				<view class="">
					<input type="text" v-model="phoneNum" value="" placeholder="输出手机号" />
				</view>
				<view class="">
					<button class="btn" type="default" @click="phoneNums">发送手机验证码</button>
				</view>
			</view>
			<!-- 登录 -->
			<view class="register_login">
				<text>已有账号？</text><text class="logina" @click="LoginImmediately">立即登录</text>
			</view>
			<!-- 协议 -->
			<view class="register_qianshu">
				<checkbox @click="checkboxs" :checked="checkbox" />
				<text>我同意签署</text> <text class="yx1">《用户协议》</text><text>和</text><text class="ys2">《隐私政策》</text>
			</view>
			<!-- 注册 -->
			<view class="btnRegister" @click="demo">
				<text>注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	import requser from '../../http/request.js';
	export default {
		data() {
			return {
				username: "18784430061", //用户名
				password: "123456", //密码
				verifyPassword: "123456", //确认密码
				CAPTCHA: "" ,//验证码
				phoneNum: "18784430061", //手机验证码
				checkbox:true //是否勾选上

			}
		},
		methods: {
			// 立即登录
			LoginImmediately() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			// 填写手机号，发送验证码
			async phoneNums() {
				const res = await uni.request({
					url: "http://dev.woniulab.com:7689/message/send",
					method: "POST",
					data: {
						phoneNum: this.phoneNum
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					}

				})
				// console.log(res)
			},
			// 注册账号
			async demo() {
				if (this.password && this.username && this.verifyPassword && this.CAPTCHA) {
					if(this.checkbox){
						if (this.password == this.verifyPassword) {
							const res = await this.$request({
								url: "/member/register",
								method: "POST",
								data: {
									username: this.username,
									password: this.password,
									verificationCode: this.CAPTCHA
						
								}
							})
							console.log(res)
						} else {
							uni - uni.showToast({
								title: '密码不一致',
								icon: "error"
							});
						}
						
					}else{
						uni - uni.showToast({
							title: '你还未勾选',
							icon: "error"
						});
					}
				} else {
					uni - uni.showToast({
						title: '你还有未输入完',
						icon: "error"
					});
				}

			},
			// 点击是否勾选上
			checkboxs(){
				if(this.checkbox){
					this.checkbox=!this.checkbox
				}else{
					this.checkbox=!this.checkbox
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './register.scss'
</style>
